<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>minitabs</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="jquery.minitabs.js"></script>
    
    <script>
$(document).ready(function(){
  $("#container").minitabs("slow","slide");
})
    </script>
    
	<style type="text/css">
	body {
		font: arial, sans-serif;
	}
	
	#minitabs {
		color: #000;
		border-bottom: 2px solid black;
		margin: 12px 0px 0px 0px;
		padding: 0px;
		z-index: 1;
		padding-left: 10px }

	#minitabs li {
		display: inline;
		overflow: hidden;
		list-style-type: none; }

	#minitabs a, a.current {
		color: #DEDECF;
		background: #898B5E;
		font: bold 1em "Trebuchet MS", Arial, sans-serif;
		border: 2px solid black;
		padding: 2px 5px 0px 5px;
		margin: 0px;
		text-decoration: none; }

	#minitabs a.current {
		background: #fff;
		border-bottom: 3px solid #fff; 
    color : black;  
  }

	#minitabs a:hover {
		color: #fff;
		background: #ADC09F; }


	#minitabs a.current:hover {
		background: #ABAD85;
		color: #DEDECF; }

	#content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
		text-align: justify;
		background: #ABAD85;
		padding: 20px;
		border: 2px solid black;
		border-top: none;
		z-index: 2;	}

	#content a {
		text-decoration: none;
		color: #E8E9BE; }

	#content a:hover { background: #898B5E; }
	</style>
</head>

<body>

<div id="container">
 
  <ul id="minitabs">
  	<li><a href="#tab-1" class="current">First tab</a></li>
  	<li><a href="#tab-2">Second tab</a></li>
  	<li><a href="#tab-3">Third tab</a></li>
  </ul>

  <div id="tab-1">
    First tab
  </div>
  
  <div id="tab-2">
    Second tab
  </div>
  
  <div id="tab-3">
    Third tab
  </div>
  
</div>

</body>
</html>
